<template>
    <view class="work-container">
        <view class="tabs">
            <!-- 提现数据 -->
            <up-tabs lineWidth="100px" itemStyle="height:50px;" :scrollable="false" :list="tabList" @click="clickTab"
                activeStyle="color:rgb(0,122,255);fontSize:18px" inactiveStyle="color:#888;fontSize:16px"></up-tabs>
            <up-list @scrolltolower="scrolltolower" style="background-color: #eeebec;">
                <up-empty :iconSize="150" mode="list" text="当前暂无数据" v-if="list.length === 0"></up-empty>
                <up-list-item v-for="item in list" :key="item.id">
                    <block>
                        <view class="tasklist">
                            <view class="task-orange">
                                <view class="cu-bar bg-white solid-bottom margin-top">
                                    <view class="action">
                                        <view class="task_title"> {{ item.subAcctName }}</view>
                                    </view>
                                </view>

                                <view class="cu-bar bg-white solid-bottom">
                                    <view class="action">
                                        提现账号: {{ item.account }}
                                    </view>
                                </view>
                                <view class="cu-bar bg-white solid-bottom">
                                    <view class="action">
                                        提现账户：{{ item.takeCashAcctNo }}
                                    </view>
                                </view>
                                <view class="cu-bar bg-white solid-bottom">
                                    <view class="action">
                                        提现金额：{{ item.tranAmt }}
                                    </view>
                                </view>
                                <view v-if="item.respMsg" class="cu-bar bg-white solid-bottom">
                                    <view class="action">
                                        反馈信息：{{ item.txnReturnMsg }}
                                    </view>
                                </view>
                                <view class="cu-card article">
                                    <view class="cu-bar bg-white solid-bottom">
                                        <view class="action">
                                            更新时间：{{ item.updateTime }}
                                        </view>
                                        <view class="action" style="padding-right:10px">
                                            <view class="text_js">
                                                <text class="text-orange">{{ item.paystateshow }}</text>
                                            </view>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </block>
                </up-list-item>
                <LoadMore :status="status" v-if="list.length !== 0"></LoadMore>
            </up-list>
        </view>
    </view>
    <up-toast ref="uToastRef"></up-toast>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import LoadMore from "@/components/LoadMore.vue"
import { getWithdrawalRecord } from '@/api/driver'

/* 数据 */
const uToastRef = ref<any>(null)
// tab选项
const tabList = reactive([
    {
        name: '待处理',
        tranStatus: '5',
    },
    {
        name: '提现中',
        tranStatus: '6',
    },
    {
        name: '已提现',
        tranStatus: '0'
    },
    {
        name: '失败',
        tranStatus: '1'
    }
])
// 获取列表参数
const getListParams = reactive({
    currPage: 1,
    limit: 10,
    tranStatus: '5'
})
// 列表数据
const list = reactive<any[]>([])
// 是否还有下一页
const hasNextPage = ref(false)
const status = ref<"loadmore" | "nomore" | "loading" | undefined>('loadmore')


/* 方法 */
// 点击tab
const clickTab = async (item: typeof tabList[0]) => {
    getListParams.currPage = 1
    getListParams.tranStatus = item.tranStatus
    list.length = 0
    await getList(getListParams)
}
// 滚动到底部
const scrolltolower = async () => {
    if (hasNextPage.value) {
        status.value = "loading"
        let params = {
            ...getListParams,
            currPage: getListParams.currPage + 1
        }
        await getList(params)
    } else {
        status.value = "nomore"
    }
}
// 获取列表数据
const getList = async (params: typeof getListParams) => {
    uToastRef.value.show({
        message: "正在获取记录",
        type: 'loading',
        duration: -1
    })
    let res = await getWithdrawalRecord(params)
    uToastRef.value.hide()
    if (res.success) {
        Object.assign(getListParams, params)
        list.push(...res.data.list)
        hasNextPage.value = res.data.hasNextPage
        if (hasNextPage.value) {
            status.value = 'loadmore'
        } else {
            status.value = 'nomore'
        }
    }
}
// 初始化封装
const init = async () => {
    await getList(getListParams)
}




/* 钩子 */
onMounted(async () => {
    await init()
})


</script>

<style lang="scss" scoped>
.Ima {
    text-align: center;
    margin-top: 110rpx;

    image {
        width: 320rpx;
    }

    view {
        margin-top: 21rpx;
        color: #999;
    }
}

.blue_btn {
    position: fixed;
    width: 64%;
    bottom: 20px;
    left: 18%;
    background-image:
        linear-gradient(to bottom, rgb(88, 193, 238), rgb(15, 171, 222));
    height: 45px;
    line-height: 45px;
    color: #fff;
    text-align: center;
    border-radius: 25px;
    font-size: 17px;
    box-shadow: 0 5px 10px rgba(88, 193, 238, 0.4);
    font-weight: bold;
    z-index: 3;
}

.tabs_title {
    display: flex;
    padding: 15rpx;
    font-size: 30rpx;
    background: #fff;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

.title_item {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.active {
    color: #1890FF;
    padding: 5px 0;
}

.fz18 {
    font-size: 25rpx;
}

.text_js {
    position: relative;
    left: 20rpx;
}

.action {
    text-align: left;
}

.my-bar {
    overflow: hidden;
    padding: 20rpx 0 30rpx 0;
}

.my-bar .action {
    max-width: 100%;
    width: 21%;
    font-size: 30rpx;
    float: left;
    margin: 10rpx 0 10rpx 20rpx;
    align-items: center;
    height: 100%;
    display: block;
}

.my-bar .info {
    margin: 13rpx 30rpx 0 0;
    float: right;
    width: 72%;
    display: block;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/*任务列表页面样式*/
page {
    background: #f1f1f1;
}

.tasklist {
    border-radius: 10px;
    color: #666;
    margin: 0 15rpx 30rpx;
    background: #fff;
    /*border:1px solid #fff;*/
}

.task-orange {
    border-left: 4px solid #f37b1d;
    box-shadow: 5px 5px 5px #ddd;
    border-radius: 6px;
}

.task-green {
    border-left: 4px solid #39b54a;
    box-shadow: 5px 5px 5px #ddd;
    border-radius: 6px;
}

.task-blue {
    border-left: 4px solid #0081ff;
    box-shadow: 5px 5px 5px #ddd;
    border-radius: 6px;
}

.task-red {
    border-left: 4px solid #e54d42;
    box-shadow: 5px 5px 5px #ddd;
    border-radius: 6px;
}

.arrow {
    width: 14px;
    height: 14px;
}

.task_title {
    font-weight: 700;
}

.tasklist .cu-bar {
    min-height: 80rpx;
}
</style>
